var checkAll = document.getElementsByClassName("check-all")[0];
var checkOneList = document.querySelectorAll(".check-one");

//全选控制单选
checkAll.onclick = function () {
    // debugger;
    var status = this.checked;//记录当前的状态
    for (var i = 0; i < checkOneList.length; i++) {
        var checkOne = checkOneList[i];
        checkOne.checked = status;
    }
}

//单选影响全选
for (let i = 0; i < checkOneList.length; i++) {
    var checkOne = checkOneList[i];
    checkOne.onclick = function () {
        var flag = true;
        for (var j = 0; j < checkOneList.length; j++) {
            var item = checkOneList[j];
            if (!item.checked) {
                flag = false;
                break;
            }
        }
        checkAll.checked = flag;
    }
}

//实现数量的加
var countInpList = document.getElementsByClassName("count-input");
var addList = document.querySelectorAll(".add");
var countList = document.getElementsByClassName("count")[0];

for (let i = 0; i < addList.length; i++) {
    let plus = addList[i];

    plus.onclick = function () {

        // 点一下数量加一
        var countInput = previous(this);  // 得到同级的上一个元素
        var num = countInput.value;
        num++;
        countInput.value = num;


        // 小计更新  = 单价 * 数量
        var countTd = parent(this);
        var priceTd = previous(countTd);
        var subtotalTd = next(countTd);

        var price = priceTd.textContent;
        var subtotal = price * num;
        subtotalTd.textContent = subtotal.toFixed(2);

        //减号出现
        var reduce = previous(countInput);
        reduce.textContent = "-";
    }
}

// 实现数量的减
var reduceList = document.querySelectorAll(".reduce");

for(let i = 0 ; i < reduceList.length ; i++){
    let reduce = reduceList[i];
    reduce.onclick = function(){
        //输入框  数量 减一 （细节要求  数量为1的时候  不再减）
        var countInput = next(this);
        var num = countInput.value;
        //如果数量为一，则不能减;
        if(num == 1)return false;
        num--;
        //如果减完之后数量为一，那么减号要去掉
        if(num == 1) this.textContent = "";//当if后面只有一行代码时，可以省略花括号
        

        countInput.value = num;

        //小计更新  =  单价*数量
        var countTd = parent(this);   //找到这个td的父元素
        var priceTd = previous(countTd); //找到父元素的前一个元素：价格
        var subtotalTd = next(countTd); //找到父元素的后一个元素：总价

        var price = priceTd.textContent;//价格的显示
        var subtotal = price * num;   //总价的值
        subtotalTd.textContent = subtotal.toFixed(2);//将总价的值保留两位小数，然后赋值给总价
    }
}


//实现删除功能
//删除单行
var deleteList = document.getElementsByClassName("delete");

for(let i = 0 ; i < deleteList.length ; i++){
    let del = deleteList[i];//detele是一个关键词，不能用作变量
    del.onclick = function(){
        var operationTd = parent(this);
        var Tr = parent(operationTd);
        if(confirm("是否删除该商品")){
            Tr.remove();

        }
    }
}


//删除多行
// checkOneList  => HTMLCollection (元素的集合  => 会随着页面同类型/类名元素的增加或减少 自动更新集合)
// 删除所有选中的
var clearAll = document.getElementById("clearAll")

function previous(ele) {  //同级的上一个元素
    return ele.previousElementSibling || ele.previousSibling
}
function parent(ele) {    //父元素
    return ele.parentElement || ele.parentNode
}
function next(ele) {      //同级的下一个元素
    return ele.nextElementSibling || ele.nextSibling
}